<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script src="js/script.js"></script>
</head>
<body>
<div id="app">
  <div class="control">
    <div class="item">
      <div>登录</div><div class="active">注册</div>
    </div>
    <div class="content">
      <div style="display: block;">
        <p>用户名</p>
        <input type="text" placeholder="account" v-model="teacher.account"/>
        <p>密码</p>
        <input id="password" type="password" placeholder="password" v-model="teacher.password"/>
        <p>确认密码</p>
        <input id="repassword" type="password" placeholder="repassword" v-model="repassword"/>
        <br/>
        <input type="submit" value="注册" @click="register"/>
      </div>
    </div>
  </div>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
      el:"#app",

      data(){
        return{
          teacher:{account:'',password:''},
          repassword:''
        }
      },

      methods:{
          register(){
              if (this.teacher.account != null && this.teacher.password != null){
                console.log(this.teacher)
                if(this.teacher.password != this.repassword){
                    alert("两次密码不一致！")
                }else{
                  var _this = this;
                    axios({
                        method:'post',
                        url:"http://192.168.137.1:8080/authorizations",
                        data:_this.teacher
                    }).then(function (res){
                      if(res.data.flag == true){
                        alert("注册成功！确认即可跳转到登录界面")
                        document.location.href = 'http://192.168.137.1:8080/index.html'
                      }
                      else {
                        alert("注册失败，账户重复！")
                      }
                    })
                }
              }else{
                alert("账号密码不能为空！")
              }
          }
      }
    })
</script>
</body>
</html>